<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
<div class="editable" id="richedit" contenteditable>1111</div>
<script>
    //监听粘贴事件
    document.querySelector('#richedit').addEventListener('paste', function (e) {
        var cbd = e.clipboardData;
        console.log(cbd)
        var ua = window.navigator.userAgent;
        if (!(cbd && cbd.items)) {
            return;
        }
        //判断浏览器
        if (cbd.items && cbd.items.length === 2 && cbd.items[0].kind === 'string' && cbd.items[1].kind === 'file' && cbd.types && cbd.types.length === 2 && cbd.types[0] === 'text/plain' && cbd.typesp[1] === 'Files' && ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49) {
            return;
        }
        //判断是图片渲染
        for (var i = 0; i < cbd.items.length; i++) {
            var item = cbd.items[i];
            if (item.kind == 'file') {
                var blob = item.getAsFile();
                if (blob.size === 0) {
                    return;
                }
                var reader = new FileReader();
                var imgs = new Image();
                imgs.file = blob;
                reader.onload = (function (aImg) {
                    return function (e) {
                        aImg.src = e.target.result;
                    }
                })(imgs)
                reader.readAsDataURL(blob)
                document.querySelector('#richedit').appendChild(imgs)
            }
        }
    }, false)
</script>
</body>

</html>
